<template>
  <div>
    <el-form ref="form" :model="form" label-position="right" size="mini" label-width="120px" :rules="rules">
      <el-form-item label="工作流模型">
        {{ProcessName || '-'}}
      </el-form-item>
      <el-form-item label="选择工作流模型">
        <el-table :data="processListP" size="small" height="300" style="width: 100%;" highlight-current-row
                  @current-change="handleCurrentChange">
          <el-table-column width="50" align="center">
            <template slot-scope="scope">
              <el-radio :label="scope.row.code" v-model="form.processDefinitionCode"
                        :disabled="scope.row.releaseState === 'OFFLINE'"> &nbsp; </el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="工作流模型ID" width="120"></el-table-column>
          <el-table-column label="工作流模型名称" min-width="200">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('State')" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.releaseState === 'OFFLINE'" class="text-danger">未启用</span>
              <span v-if="scope.row.releaseState === 'ONLINE'" class="text-success">已启用</span>
              <!-- {{_rtPublishStatus(scope.row.releaseState)}} -->
            </template>
          </el-table-column>
          <el-table-column :label="$t('Description')" min-width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.description | filterNull}}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('Create Time')" width="200">
            <template slot-scope="scope">
              <span>{{scope.row.createTime | formatDate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" fixed="right">
            <template slot-scope="scope">
              <a href="javascript:;" :disabled="scope.row.releaseState === 'ONLINE'" style="margin-right:5px;"
                 @click.stop="_edit(scope.row)">编辑</a>
              <a v-if="scope.row.releaseState === 'ONLINE'" href="javascript:;"
                 @click.stop="_poponline(scope.row,'OFFLINE')">下线</a>
              <a v-if="scope.row.releaseState === 'OFFLINE'" href="javascript:;"
                 @click.stop="_poponline(scope.row,'ONLINE')">上线</a>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="新建工作流模型">
        <el-button type="primary" plain @click="fileUpdateDialog = true">导入工作流模型</el-button>
        <el-button type="primary" plain @click="dialogVisible=true">创建工作流模型</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="导入工作流模型" :visible.sync="fileUpdateDialog" width="auto" append-to-body>
      <m-definition-update type="DEFINITION" :projectCode="projectCode" @onProgressDefinition="onProgressFileUpdate"
                           @onUpdateDefinition="onUpdateFileUpdate" @onArchiveDefinition="onArchiveFileUpdate"
                           @closeDefinition="closeFileUpdate"></m-definition-update>
    </el-dialog>
    <div v-if="dialogVisible">
      <el-dialog title="创建工作流模型" v-if="dialogVisible" :visible.sync="dialogVisible" width="90%" :append-to-body="true"
                 top="10px">
        <m-create-dag @onUpdate="onUpdate" @close="close" :projectCode="projectCode"></m-create-dag>
        <!-- <m-create-data-source :item="''" @onUpdate="onUpdate" @close="close"></m-create-data-source> -->
      </el-dialog>
    </div>
    <div v-if="dialogEditVisible">
      <el-dialog title="编辑工作流模型" v-if="dialogEditVisible" :visible.sync="dialogEditVisible" width="90%" :append-to-body="true"
                 top="10px">
        <definitionDetails @onUpdate="onUpdate" @close="close" :projectCode="projectCode"
                           :processDefinitionCode="processDefinitionCode"></definitionDetails>
        <!-- <m-create-data-source :item="''" @onUpdate="onUpdate" @close="close"></m-create-data-source> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'
  import { mapActions } from 'vuex'
  import { publishStatus } from '@/conf/home/pages/dag/_source/config'
  import mDefinitionUpdate from '@/module/components/fileUpdate/definitionUpdate'
  import mCreateDag from '@/conf/home/pages/dag/dialog'
  import definitionDetails from '@/conf/home/pages/dag/definitionDetails'

  export default {
    props: {
      projectCode: String
    },
    components: {
      mDefinitionUpdate,
      mCreateDag,
      definitionDetails
    },
    data () {
      return {
        dialogEditVisible: false,
        dialogVisible: false,
        fileUpdateDialog: false,
        progress: 0,
        isUpdate: false,
        processListP: [],
        strSelectCodes: [],
        rules: [],
        processDefinitionCode: '',
        form: {
          processDefinitionCode: ''
        }
      }
    },
    watch: {
      form: {
        deep: true,
        immediate: true,
        handler: function (newval) {
          this.$emit('input', newval)
        }
      },
      projectCode: function (newval) {
        if (newval) this._getList()
      }
    },
    computed: {
      ProcessName () {
        if (this.form.processDefinitionCode === '') return ''
        return this.processListP.find(e => e.code === this.form.processDefinitionCode).name
      }
    },
    created () {

    },
    methods: {
      ...mapActions('dag', ['getProcessListP', 'editProcessState']),
      /**
       * get data list
       */
      _getList () {
        let searchParams = {
          pageNo: 1,
          pageSize: 100,
          projectCode: this.projectCode
        }
        // return io.get(`projects/${this.projectCode}/process-definition/queryByUser`, searchParams, res => {
        //   this.processListP = []
        //   this.processListP = res.data.totalList
        // }).catch(e => {
        //   console.error(e)
        // })
        this.getProcessListP(searchParams).then(res => {
          // this.processListP = []
          this.processListP = res.totalList
        }).catch(e => {
        })
      },
      /**
       * online
       */
      _poponline (item, releaseState) {
        this.editProcessState({
          ...item,
          releaseState: releaseState
        }).then(res => {
          this._getList()
        }).catch(e => {
          this.$message.error(e.msg || '')
        })
      },
      /**
       * edit
       */
      _edit (item) {
        if (item.releaseState === 'ONLINE') return
        this.processDefinitionCode = item.code
        this.dialogEditVisible = true
      },
      handleCurrentChange (val) {
        if (val.releaseState === 'OFFLINE') return
        this.form.processDefinitionCode = val.code
      },
      _rtPublishStatus (code) {
        return _.filter(publishStatus, v => v.code === code)[0].desc
      },
      onProgressFileUpdate (val) {
        this.progress = val
      },
      onUpdateFileUpdate () {
        this._getList()
        this.isUpdate = false
        this.progress = 0
        this.fileUpdateDialog = false
      },
      onUploadFile () {
        this.isUpdate = false
        this.progress = 0
        this.fileUploadDialog = false
      },
      closeFileUpload () {
        this.progress = 0
        this.fileUploadDialog = false
      },
      onArchiveFileUpdate () {
        this.isUpdate = true
      },
      closeFileUpdate () {
        this.progress = 0
        this.fileUpdateDialog = false
      },
      onUpdate () {
        this._getList()
        this.dialogVisible = false
      },
      close () {
        this.dialogEditVisible = false
        this.dialogVisible = false
      },
      validate () {
        return new Promise((resolve, reject) => {
          if (this.form.processDefinitionCode) {
            return resolve()
          }
          this.$message.warning('请选择工作流模型')
          return reject()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep.el-button {
    width: 120px;
}
::v-deep.el-table th {
    background-color: #f5f5f5;
}
.files {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
    .file {
        width: 158px;
        margin: 10px 5px 0 5px;
        height: 80px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        backdrop-filter: blur(6px);
        .attr {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            line-height: 20px;
            font-weight: 600;
            span {
                font-weight: 400;
            }
        }
    }
}
</style>
